import { Tabs } from 'antd-mobile'
import './style.css'
import { useTabs } from './useTabs'
import HomeList from './HomeList'

const Home = () => {

  const { channels } = useTabs()

  return (
    <div className="tabContainer">
      {/* tab区域 */}
      <Tabs>
        {channels.map((item) => (
          <Tabs.Tab title={item.name} key={item.id}>
            <div className="listContainer">
               {/* HomeList列表 */}
               {/* 需要加上类名，严格控制滚动盒子 */}
              <div className='listContainer'>
                <HomeList channelId={'' + item.id}/>
              </div>
            </div>
          </Tabs.Tab>
        ))}
      </Tabs>

      {/*
        <Tabs>
         <Tabs.Tab title='水果' key='fruits'>
            菠萝
          </Tabs.Tab>
          <Tabs.Tab title='蔬菜' key='vegetables'>
            西红柿
          </Tabs.Tab>
          <Tabs.Tab title='动物' key='animals'>
            蚂蚁
          </Tabs.Tab>
        </Tabs>
       */
      }
    </div>
  )
}

export default Home